<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="keywords" content="">
    <style>
        body {
            font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
            background-color: #fff;
            -webkit-font-smoothing: subpixel-antialiased;
        }

        div {
            display: block;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .order-progress-bar {
            height: 60px;
            width: 100%;
            margin: 40px 0;
            text-align: center;
        }

        .order-progress-bar .step {
            float: left;
            width: 25%;
        }

        .order-progress-bar .done .step-num {
            background-color: #f03d37;
        }

        .order-progress-bar .step-num {
            color: #ffffff;
            font-size: 12px;
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            border-radius: 10px;
            text-align: center;
            background-color: #ffd8d7;
            position: relative;
            top: 10px;
        }

        .order-progress-bar .done .bar {
            background-color: #f03d37;
        }

        .order-progress-bar .bar {
            width: 0;
            height: 4px;
            border-left: 160px solid #ffd8d7;
            border-right: 160px solid #ffd8d7;
        }

        .order-progress-bar .done .step-text {
            color: #f03d37;
        }

        .step-text {
            font-size: 14px;
            display: inline-block;
            margin-top: 10px;
        }

        .count-down-wrapper {
            width: 100%;
            height: 90px;
            padding-top: 20px;
            margin-bottom: 40px;
            background-color: #fff3f3;
        }

        .count-down-wrapper .count-down {
            padding-left: 55px;
            min-height: 41px;
            background: url("") no-repeat;
        }

        .count-down-wrapper .time-left {
            font-size: 18px;
            color: #666;
            margin-bottom: 4px;
        }

        div > p {
            margin: 0;
        }

        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

        .count-down-wrapper .time-left .minute, .count-down-wrapper .time-left .second {
            font-size: 32px;
            color: #f03d37;
            margin: 0 5px;
        }

        .count-down-wrapper .tip {
            font-size: 14px;
            color: #f03d37;
        }

        .warning {
            font-size: 18px;
            color: #666;
            padding-left: 18px;
            background: url("") no-repeat;
            background-size: 12px;
            background-position-y: 2px;
            margin-bottom: 8px;
        }

        .warning .attention {
            color: #faaf00;
        }

        .order-table {
            width: 100%;
            border: 1px solid #e5e5e5;
            border-spacing: 0;
            margin-bottom: 60px;
        }

        table {
            width: 1200px;
            height: 122px;
            display: table;
            border-collapse: separate;
            box-sizing: border-box;
            text-indent: initial;
            border-spacing: 2px;
            border-color: grey;
        }

        table > tr {

            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }

        .order-table thead {
            width: 1198px;
            height: 50px;
            background-color: #f7f7f7;
        }

        .order-table td {
            font-size: 20px;
            text-align: center;
            padding: 25px 0;
            color: #333;
        }

        .order-table .showtime {
            font-size: 20px;
            color: #f03d37;
        }

        .order-table .hall {
            display: inline-block;
            font-size: 20px;
            color: #424242;
            font-weight: 700;
            margin-right: 10px;
            vertical-align: top;
        }

        div > span > i {
            font-size: 20px;
            margin-right: 2px;
        }

        .right .price-wrapper {
            font-size: 20px;
            color: #333;
            margin-bottom: 17px;
        }

        .right {
            text-align: right;
        }

        .right .price-wrapper .price {
            font-size: 36px;
            color: #f03d37;
        }

        .right .price-wrapper .price:before {
            content: "\FFE5";
            font-size: 24px;
        }

        .btn, .pay-btn {
            cursor: pointer;
            display: inline-block;
            width: 190px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #fff;
            background-color: #f03d37;
            border-radius: 100px;
            -webkit-box-shadow: 0 2px 10px -2px #f03d37;
            box-shadow: 0 2px 10px -2px #f03d37;
        }
        .time-red{
            color: red;
        }
        .time-green{
            color: green;
        }
    </style>
</head>
<body>
<div class="container">


</div>
<div id="order">
    <div class="order-progress-bar">
        <div class="step first done">
            <span class="step-num">1</span>
            <div class="bar" style="border-left-color: transparent!important;
        border-color: #f03d37;"></div>
            <span class="step-text">选择影片场次</span>
        </div>
        <div class="step done">
            <span class="step-num">2</span>
            <div class="bar" style="border-color: #f03d37;"></div>
            <span class="step-text">选择座位</span>
        </div>
        <div class="step done">
            <span class="step-num">3</span>
            <div class="bar" style="border-color: #f03d37;"></div>
            <span class="step-text">3分钟内付款</span>
        </div>
        <div class="step last ">
            <span class="step-num">4</span>
            <div class="bar"></div>
            <span class="step-text">影院取票观影</span>
        </div>
    </div>
    <div class="count-down-wrapper">
        <div class="count-down" data-payleftseconds="838">
            <p class="time-left">
                请在
                <span class="minute">{{minute}}</span>
                分钟
                <span class="second">{{second}}</span>秒内完成支付
            </p>
            <p class="tip">超时订单会自动取消</p>
        </div>
    </div>

    <table class="order-table">
        <thead>
        <tr>
            <th>影片</th>
            <th>时间</th>
            <th>影院</th>
            <th>座位</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="movie-name">{{orderCancel.movieName}}</td>
            <td class="showtime">{{orderCancel.startTime}}</td>
            <td class="cinema-name">{{orderCancel.cinemaName}}</td>
            <td>
                <span class="hall">{{orderCancel.hallName}}</span>
                <div class="seats">
                    <div>
                        <span v-for="(seat,i) in seats"  :class="i%2==1?'time-red':'time-green'" style="margin-right: 25px" >
                            <span>{{seat.row}}排</span><span >{{seat.col}}座</span>
                        </span>
                    </div>
                    <div>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="right">
        <div class="price-wrapper">
            <span>实际支付 :</span>
            <span class="price">{{orderCancel.totalPrice}}</span>
        </div>
        <div>
            <button type="button"  class="pay-btn" @click="pay()">确认支付</button>
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el:"#order",
        data: {
            second: "",
            minute: "",
            timer: "",
            endtime: "",
            flag: false,
            endtimeNum: "",
            orderCancel:{},
            seats:[]
        },
        created: function () {
            let id=location.search.split("=")[1]
            axios.get("/order/cancelOrder?id=" +id).then(function (response) {
                vm.orderCancel=response.data;
                vm.orderCancel.startTime = moment(vm.orderCancel.startTime)
                    .format("YYYY年MM月DD日 HH:mm");
                vm.endtimeNum=new Date(vm.orderCancel.cancelDate).getTime()
            })
            axios.get("/seat/getSeats?id="+id).then(function (response) {
                vm.seats=response.data;
            })
        },
        mounted: function () {

            let time = setInterval(() => {
                if (vm.flag == true) {
                    clearInterval(time);
                }
                const nowTime = new Date();
                let leftTime = parseInt((vm.endtimeNum - nowTime.getTime()) / 1000);
                vm.second = parseInt(leftTime % 60);
                vm.minute = parseInt(leftTime / 60);
                if (leftTime <= 0) {
                    vm.flag = true
                    location.href="/index.html"
                }
            }, 1000);
        },
        methods:{
            pay:function () {
                let id=location.search.split("=")[1]
                location.href="/pay02.html?orderId="+id
            }
        }
    })
</script>
</body>
</html>